<template>
  <el-form ref="loginForm" :model="loginFormData" status-icon :rules="rules" label-width="100px"
    class="demo-loginFormData">
    <el-form-item label="用户名" prop="username" class="label">
      <el-input class="input" v-model="loginFormData.username" type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="password" class="label">
      <el-input class="input" v-model="loginFormData.password" type="password" autocomplete="off" />
    </el-form-item>

    <el-form-item label="验证码" prop="capture" class="check label">
      <el-input class="input1" v-model="loginFormData.capture" @keydown.enter="submitForm(loginForm)" maxlength="5"/>
      <span v-html="capture" @click="getCapture" class="pht" v-loading="loading"></span>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm(loginForm)" class="button">登陆</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { rules, useSubmitForm } from "../../composition/login/validate"
import * as api from "@/api/users.js"
import {useRouter} from "vue-router"
//引用loading加载
import { ElLoading } from 'element-plus'
//引入store
import {useUser} from "@/store/users.js"
//使用store
let userStore = useUser()
let router = useRouter()
let loading = ref(true)
console.log(api)
let validataSuccess = () => {
  //发起登入请求
  //1.登入请求之前要先校验验证码,将验证码统一转换成小写
  vertifyCapture(loginFormData.capture.toLowerCase())
  console.log('校验成功')
}
let validataFaild = () => {
  console.log('校验失败')
}
let submitForm = useSubmitForm(validataSuccess, validataFaild)
const loginForm = ref()
//注入到表单的数据
const loginFormData = reactive({
  username: '',
  password: '',
  capture: '',
})
//声明一个展示验证码的响应式变量
let capture = ref()
//获取验证码
let getCapture = async ()=> {
  loading.value = true
  let res =await api.getCaptureApi()
  loading.value = false
  if(res.data.state) capture.value = res.data.img  
}

//首次页面加载调用
onMounted(() => {
  getCapture()
})
//校验验证码
//1.本地的表单校验通过之后
//2.通过接口校验验证码,一定要配置校验代理 
let loadingInstance = null
let  vertifyCapture = async captcha =>{
  //loading动画框调用
  loadingInstance = ElLoading.service({
    lock:false,
    text:"正在登入。。。"
  })
  try{
    let res = await api.vertifyCaptchaApi(captcha)
    //表示验证码校验通过
    // //发起登入请求
    login(loginFormData.username, loginFormData.password)
  }catch(e){
    //验证码校验失败，重新获取一个新的验证码
    getCapture()
    loadingInstance.close()
  } 

}
/**
 * 
 * @param {string} username 用户名
 * @param {string} password 密码
 */
let login  = async(username, password) =>{
  try{
    let res = await api.loginApi(username, password)
     //存储token，存到sessionStorage中
     sessionStorage.setItem("my-token",res.data.token)
    //存储用户信息
    userStore.$patch({userInfo:res.data.userInfo})
    //登入成功需要跳转页面
    router.push("/")
    
  }catch(e){
    loadingInstance.close() 
    console.log(e)
  }
}
onUnmounted(()=>{
  loadingInstance && loadingInstance.close()
})


</script>
<style lang="less" scoped>
.input {
  width: 250px;
}

.input1 {
  width: 150px;
  // border-radius: 0!important;
}

.button {
  width: 250px;
}

span {
  background-color: #fff;
  border-radius: 0 4px 4px 0;
  width: 100px;
  outline: none;
}
.pht {
  :deep(svg) {
    width: 100px;
    height: 20px;
  }
}
.check {
  :deep(.el-input__wrapper) {
    border-radius: 4px 0 0 4px;
    box-shadow: none;
  }
}

.label {
  :deep(.el-form-item__label) {
    color: #fff;
  }
}
</style>